<template>
    <div class="main-body">
        <el-row style="padding: 0px 0px 5px 0px;">
            <el-col :span="4" >
                <el-input placeholder="请输入应用名/编码" v-model="query.name" class="input-with-select">
                    <el-button slot="append"  @click="loadData" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="20" style="padding: 0px 0px 0px 10px" >
                <el-button @click="openAdd()" plain>添加</el-button>
                <el-button @click="openEdit()" plain>修改</el-button>
                <el-button @click="remove()" type="danger" plain>删除</el-button>
            </el-col>
        </el-row>

        <el-table
                border stripe highlight-current-row header-cell-class-name="t_h_cell" class="data-table"
                :data="tableData.rows"
                :v-loading="loading"
                :height=dataTableHeight ref="tableRef"
                @current-change="dataChange" >

            <el-table-column :show-overflow-tooltip="true" sortable width="200"
                    prop="appName" label="应用名称">
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" sortable width="150"
                    prop="appCode" label="应用编码">
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" sortable width="250"
                             prop="baseUrl" label="基础地址">
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" sortable
                             prop="frame" label="展现方式">
                <template  slot-scope="scope">
                    <el-tag v-if="scope.row.frame===1" >基座</el-tag>
                    <el-tag v-if="scope.row.frame===2" >微前端</el-tag>
                    <el-tag v-if="scope.row.frame===3" >iframe</el-tag>
                </template>

            </el-table-column>

        </el-table>

        <table-pager :loading.sync="loading" :size.sync="tableData.size" :page.sync="tableData.page" :total.sync="tableData.total"
                     @loadData="loadData"></table-pager>

        <app_edit :visible.sync="editVisible"
                         @loadData="loadData"  ref="editRef"  ></app_edit>

    </div>

</template>

<script>
    import app_edit from './app_edit.vue'
    export default {
        name:'app_main',
        components: {
            app_edit,
        },

        data() {
            return {
                query:{},
                offsetHeight:60,
                dataTableHeight:400,
                currentRow:null,
                editVisible:false,
                loading:false,
                tableData: {
                    rows:[
                    ],
                    page:1,
                    size:20,
                    total:0
                },
            }
        },
        created() {

        },
        mounted() {
            this.$nextTick(function () {
                this.dataTableHeight = window.innerHeight - this.$refs.tableRef.$el.offsetTop - this.offsetHeight;
            });
            this.loadData();
        },
        methods: {
            dataChange(val) {
                this.currentRow = val;
            },
            indexData(index){
                return index+(this.tableData.size*(this.tableData.page-1))+1;
            },
            loadData(){
                let _this=this;
                let url='/app/dataPager';
                _this.$utils.loadTableData(_this,url);
            },
            openAdd(){
                this.editVisible=true;
                this.$refs.editRef.initData();
            },
            openEdit(){
                let _this=this;
                if (_this.currentRow===null){
                    _this.$message.error("请选择数据");
                }else{
                    _this.editVisible=true;
                    _this.$refs.editRef.loadData(this.currentRow);
                }
            },
            remove(){
                let _this=this;
                if (_this.currentRow===null){
                    _this.$message.error("请选择数据");
                }else{
                    let url="/app/delete";
                    let params={id:_this.currentRow.id};
                    _this.$confirm("确定删除数据", '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                        //删除数据
                        _this.$http.post(url,params).then(function(res){
                            if(res.data.success){
                                _this.$message.success("操作成功");
                                _this.loadData();
                            }else{
                                _this.$message.error('操作错误！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                            }
                        },function(e){
                            _this.$message.error('操作错误！'+e);
                        });
                    });
                }
            },
        },
        filters: {

        },
        watch:{
            '$store.state.clientHeight':function(clientHeight){ //监听屏幕高度变化
                let _this=this;
                setTimeout(function (){
                    _this.dataTableHeight = clientHeight - _this.$refs.tableRef.$el.offsetTop - _this.offsetHeight;
                },200)
            }
        }
    }

</script>
